<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_804036_xs3me8pe399.css">
    <link rel="stylesheet" href="../css/frame2.css">
</head>
<body>
<header id="header">
  我的
   <span class="right" onclick=goSetting()><i class="iconfont icon-setting"></i></span>
 </header>
 <section>
   <div class="memberInfo">
      <p><img src="../image/beijing_03.png" alt=""></p>
      <p class="name">大黑的家</p>
      <p>黑币剩余 1234个</p>
   </div>
   <ul class="list">
     <li class="borderBot" onclick="openW(0)">
       <p><img src="../image/qiandao.png" alt=""></p>
       <p>签到</p>
     </li>
     <li class="borderBot" onclick="openW(1)">
       <p><img src="../image/blue.png" alt=""></p>
       <p>绿能</p>
     </li>
     <li class="borderBot" onclick="openW(2)">
       <p><img src="../image/jifen.png" alt=""></p>
       <p>积分</p>
     </li>
     <li onclick="openW(3)">
       <p><img src="../image/youhuiquan.png" alt=""></p>
       <p>优惠劵</p>
     </li>
     <li onclick="openW(4)">
       <p><img src="../image/gongjiaoka.png" alt=""></p>
       <p>公交卡</p>
     </li>
     <li onclick="openW(5)">
       <p><img src="../image/haoyou.png" alt=""></p>
       <p>好友</p>
     </li>
   </ul>
   <div class="chart">
     <div class="lv">用户等级：金牌用户</div>
     <svg xmlns="http://www.w3.org/200/svg" height="120" width="120">
      <circle cx="60" cy="60" r="50" fill="none" stroke="#fff" stroke-width="20" stroke-linecap="round"/>
      <circle
        id="J_demo2" class="demo2"
        stroke-dasharray="0,10000"
        cx="60" cy="60" r="50" fill="none" stroke="blue" stroke-width="20"/>
    </svg>
    <div class="text">
      <p>能量值</p>
      <p>1200</p>
    </div>
   </div>
 </section>
</body>
<script type="text/javascript">
  apiready=function () {

  }
  var demo2 =  document.querySelector("#J_demo2");
  var circleLength = Math.floor(2 * Math.PI * demo2.getAttribute("r"));

  window.onload = rotateCircle;

  function rotateCircle () {
    //var val = parseFloat(btn1.value).toFixed(2);
    var val=50;
    val = Math.max(0,val);
    val = Math.min(100,val);
    demo2.setAttribute("stroke-dasharray","" + circleLength * val / 100 + ",10000");
}
//跳转设置
function goSetting() {
  api.openWin({
      name: 'setting',
      url: 'member/setting.html',
      bgColor:'#fff',
      bounces: false,
      rect: {
          x: 0,
          y: 0,
          w: 'auto',
          h: 'auto'
      }
  });
}
//跳转
function openW(index){
  var urls=['','greenPower.html','integral.html','','','myFriend.html'];

  api.openWin({
        name: 'register',
        url: './member/'+urls[index],
        bgColor:'#fff',
        bounces: false,
        rect: {
            x: 0,
            y: 0,
            w: 'auto',
            h: 'auto'
        }
    });
}
</script>
</html>
